<template>
  <view class="dy-scroll-container">
    <dy-navbar title="Rate评分" />
    <scroll-view class="dy-scroll" scroll-y="">
      <dy-card padding="0">
        <dy-section slot="title" padding="24">基础用法：{{ syncRate }}分</dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <dy-rate v-model="syncRate" />
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24">自定义颜色</dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <view class="dy-align-center">
              未选中 ( unselectedColor )：
              <dy-rate v-model="syncRate1" unselected-color="#ff2d51" />
            </view>
            <view class="dy-align-center dy-mg-tb-16">
              选中 ( selectedColor )：
              <dy-rate v-model="syncRate1" selected-color="#ff508a" />
            </view>
            <view class="dy-align-center dy-mg-tb-16">
              两者都有：
              <dy-rate v-model="syncRate1" unselected-color="#ff2d51" selected-color="#ff508a" />
            </view>
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24">自定义图标</dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <view class="dy-align-center">
              未选中 ( unselectedIcon )：
              <dy-rate v-model="syncRate2" unselected-icon="praise" />
            </view>
            <view class="dy-align-center dy-mg-tb-16">
              选中 ( selectedIcon )：
              <dy-rate v-model="syncRate2" selected-icon="praise" selected-color="#ff508a" />
            </view>
            <view class="dy-align-center dy-mg-tb-16">
              两者都有：
              <dy-rate
                v-model="syncRate2"
                unselected-icon="praise"
                selected-icon="praise-fill"
                unselected-color="#ff2d51"
                selected-color="#ff508a"
              />
            </view>
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" desc="size设置图标大小">自定义大小</dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <view class="dy-align-center">
              size = "24"：
              <dy-rate v-model="syncRate" size="24" />
            </view>
            <view class="dy-align-center dy-mg-tb-16">
              size = "48"：
              <dy-rate v-model="syncRate" size="48" />
            </view>
            <view class="dy-align-center dy-mg-tb-16">
              size = "72"：
              <dy-rate v-model="syncRate" size="72" />
            </view>
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" desc="count设置图标数量">自定义数量</dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <view class="dy-align-center">
              count = "5"：
              <dy-rate v-model="syncRate3" :count="5" />
            </view>
            <view class="dy-align-center dy-mg-tb-16">
              count = "8"：
              <dy-rate v-model="syncRate3" :count="8" />
            </view>
            <view class="dy-align-center dy-mg-tb-16">
              count = "10"：
              <dy-rate v-model="syncRate3" :count="10" />
            </view>
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" desc="gutter设置图标间距">图标间距</dy-section>
        <template slot="body">
          <view class="dy-pd-24">
            <view class="dy-align-center">
              gutter = "20"：
              <dy-rate v-model="syncRate3" :gutter="20" />
            </view>
            <view class="dy-align-center dy-mg-tb-16">
              gutter = "40"：
              <dy-rate v-model="syncRate3" :gutter="40" />
            </view>
            <view class="dy-align-center dy-mg-tb-16">
              gutter = "60"：
              <dy-rate v-model="syncRate3" :gutter="60" />
            </view>
          </view>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Rate',
  data() {
    return {
      syncRate: 3,
      syncRate1: 3,
      syncRate2: 3,
      syncRate3: 3,
      disRate: 2
    }
  }
}
</script>
